/**
 * 动态-热门
 */

'use strict';

import React, {Component} from 'react';
import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';
import {connect} from 'react-redux';
import {dongtaiActions} from '../../../../actions/index';
import ToastUtil from '../../../../core/utils/toast-util';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Color from '../../../../core/constant/color';
import Http from '../../../../core/utils/http';
import Util from '../../../../core/utils/util';
import IconButton from "../../../../core/component/comp.icon-button";

class PageDongTaiHot extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(dongtaiActions.hot()).then((json) => {
            console.log(json, '------>hot ---- list')
        })
    }

    onPressFocus(skillDetailInfo) {


    }

    genFocusButtonUI(item, index) {
        const {isAttention} = item;
        return (
            <IconButton style={isAttention!='0' ? styles.btnFocus : styles.btnUnFocus}
                        textStyle={isAttention!='0' ? styles.btnFocusText : styles.btnUnFocusText}
                        title={isAttention!='0' ? "已关注" : "关注"} onPress={this.onPressFocus.bind(this, item)}/>
        );
    }

    onPressJumpToPersonInfo(item, index){
        const {navigate} = this.props.navigation;
        console.log(item,"---->personId")
        //跳转到搜索列表
        navigate('PersonInfoScene', {
            title: "个人资料",
            userId:item.empId,
            userInfo:{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
                passVideo: true,
                shortDesc: '做最好的自己，永远🌺年轻🌺~~',
            }
        })
    }

    genStoryItemUI(item, index) {
        const {showPingLun} = this.state;
        console.log(Util.substrImageUrl(item.pic),"------bgImage")
        return (
            <View key={`story-item-${index}`} style={styles.storyItem}>
                <TouchableOpacity onPress={this.onPressJumpToPersonInfo.bind(this,item,index)}>
                    <ImageBackground source={{uri:Util.substrImageUrl(item.pic)}} style={styles.bannerBg}>
                        <View style={styles.bannerTopBar}>
                            <Text style={styles.bannerStoryTitle}>{item.desc_}</Text>
                            {this.genFocusButtonUI(item, index)}
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
                <View style={styles.userInfo}>
                    <View style={styles.userInfoLeftPanel}>
                        <Image style={styles.userIcon} source={{uri:Util.substrImageUrl(item.touxiang)}}/>
                        <Text style={styles.userNickName}>{item.empName}</Text>
                    </View>
                    <View style={styles.userInfoRightPanel}>
                        <Image style={styles.userHeartIcon} source={item.isPraise=='0'?require('../../images/dynamic/dynamic_heart_uncheck.png'):require('../../images/dynamic/dynamic_heart.png')}/>
                        <Text style={styles.userHeartCount}>{item.praiseCount}</Text>
                        {
                            showPingLun && (
                                <View>
                                    <Image style={styles.userMessageIcon}
                                           source={require('../../images/dynamic/dynamic_pinglun.png')}/>
                                    <Text style={styles.userMessageCount}>{100}</Text>
                                </View>)
                        }
                    </View>
                </View>
            </View>
        );
    }

    genStoryListUI() {
        const {storyList} = this.props;
        console.log(storyList, "----->near")
        if(storyList.length>0){
            return (
                <View>
                    {storyList.map((item, index) => this.genStoryItemUI(item, index))}
                </View>
            );
        }else{
            return (
                <View style={styles.storyListEmpty}>
                    <Text style={styles.storyListEmptyText}>暂无信息</Text>
                </View>
            )
        }
    }

    render() {
        const {storyList} = this.props;
        if(storyList.length>0){
            return (
                <ScrollView style={styles.body}>
                    {this.genStoryListUI()}
                </ScrollView>
            )
        }else{
            return (
                <View style={styles.storyListEmpty}>
                    <Text style={styles.storyListEmptyText}>暂无信息</Text>
                </View>
            )
        }
    }
}

const styles = StyleSheet.create({
    body: {
        backgroundColor: '#E6E6E6',
        flex: 1,
    },
    storyItem: {
        marginBottom: 10,
        backgroundColor:Color.PRIMARY_COLOR,
    },
    bannerBg: {
        width: Util.getScreenWidth(),
        height: 173,
    },
    userInfo: {
        height: 40,
        backgroundColor: 'white',
        justifyContent: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
    },
    userInfoLeftPanel: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    userInfoRightPanel: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    userIcon: {
        width: 30,
        height: 30,
        borderRadius: 15,
    },
    userNickName: {
        marginLeft: 10,
        fontSize: 12,
        color: '#696969',
    },
    userHeartIcon: {
        width: 17,
        height: 17,
        resizeMode: 'contain',
    },
    userMessageIcon: {
        width: 17,
        height: 17,
        resizeMode: 'contain',
    },
    userHeartCount: {
        marginLeft: 10,
        fontSize: 12,
        color: '#696969',
        marginRight: 20,
    },
    userMessageCount: {
        marginLeft: 10,
        fontSize: 12,
        color: '#696969',
    },
    bannerTopBar: {
        height: 38,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems: 'center',
        paddingLeft: 10,
        paddingRight:10,
        flexDirection:'row',
    },
    bannerStoryTitle: {
        color: 'white',
        fontSize: 14,
        flex:1,
        marginRight:10,
    },
    btnFocus: {
        width:60,
    },
    btnUnFocus: {
        width:60,
        backgroundColor: 'transparent',
        borderWidth: 1,
        borderColor: 'white',
    },
    btnFocusText: {
        color:'white',
    },
    btnUnFocusText: {
        color: 'white',
    },
    storyListEmpty:{
        flex:1,
        width:'100%',
        alignItems:'center',
        justifyContent:'center',
    },
    storyListEmptyText:{
        color:Color.COLOR_TEXT_BLACK3,
    },
});

export default connect((state, props) => {
    return ({
        storyList: state.dongtai.hot,
    });
})(PageDongTaiHot);